<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>
        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
        <link rel="stylesheet" href="/assets/module/admin.css?v=318"/>

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
        <style rel="stylesheet">
            .layui-table-page {
                position: relative;
                margin-top: 0px; /* 可根据需要调整上边距 */
            }

            .layui-table-box {
                margin-bottom: 10px;
            }
            .layui-card-body{
                margin-top: 25px;
                padding-top: 30px;
            }
            .layui-form-label
            {
                padding: 9px 8px 9px 0px;
            }
            .button-container{
                padding-bottom: 20px;
            }
        </style>
        <script type="text/javascript">
            var url = window.location.pathname.substring(1);
            var item = url.split("/");
            var C = item[0];
            var A = item[1];
            var cUrl = "/" + C;

        </script>

    </head>
</header>
<body>
<div>
    <div class="layui-card">
        <div class="layui-card-header" style="padding: 10px">
            <form class="layui-form">
                <!-- 搜索区域 -->
                <div class="layui-form-item">
                    <!-- 培训项目 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">培训项目</label>
                        <div class="layui-input-inline">
                            <select id="projectSelect" name="project">
                                <option value="">请选择项目</option>
                                <option
                                        th:each="item : ${projectNameList}"
                                        th:text="${item}"
                                        th:value="${item}">
                                </option>
                            </select>
                        </div>
                    </div>

                    <!-- 所属班级 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">班级</label>
                        <div class="layui-input-inline">
                            <select id="classSelect" name="classs">
                                <option value="">请选择班级</option>
                                <option
                                        th:each="item : ${classesNameList}"
                                        th:text="${item}"
                                        th:value="${item}">
                                </option>
                            </select>
                        </div>
                    </div>
                    <!-- 所属专家 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">指导教师</label>
                        <div class="layui-input-inline">
                            <select id="expertSelect" name="expert">
                                <option value="">请选择指导教师</option>
                                <option
                                        th:each="item : ${expertNameList}"
                                        th:text="${item}"
                                        th:value="${item}">
                                </option>
                            </select>
                        </div>
                    </div>

                    <!-- 姓名 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input id="tbName" type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 工作单位 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">工作单位</label>
                        <div class="layui-input-inline">
                            <input id="tbDepartment" type="text" name="department" placeholder="请输入工作单位" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 手机号码 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input id="tbTel" type="text" name="tel" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 按钮区域 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button id="search" class="layui-btn" lay-submit="" lay-filter="searchForm">
                                <i class="layui-icon layui-icon-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body" style="margin-top: 30px">
            <div style="margin: 20px;">
                <button id="addStudent" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 新增</button>
                <button id="batchImportStudent" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-upload">
                </i> 批量导入学员数据</button>
                <button id="assignExpert" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 批量分配指导教师</button>
                <!--                <button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-download-circle"></i> 导出列表数据</button>-->
            </div>
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
            <div class="layui-table-page"></div> <!-- 将分页栏放置在这里 -->
            <script type="text/html" id="barTable">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reset_password">重置密码</a>
                <a class="layui-btn layui-btn-xs" lay-event="assign_expert">分配指导教师</a>
            </script>
            <script th:inline="none">
                layui.use(['table', 'form', 'layer'], function () {
                    var $ = layui.jquery;
                    var layer = layui.layer;
                    var form = layui.form
                    var table = layui.table;

                    var projectNameList = [];
                    var classesNameList = [];
                    var expertNameList = [];
                    var chargerNameList = [];

                    table.render({
                        elem: '#tableList',
                        url: '/student/list',
                        defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        title: '学员数据',
                        cols: [[
                            {type: 'checkbox', width: 50},  // 添加复选框列
                            {
                                title: '序号', width: 80, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1
                                }
                            },
                            {field: 'name', title: '姓名', width: 120},
                            {field: 'department', title: '工作单位', width: 200},
                            {field: 'tel', title: '手机号码', width: 200},
                            //TODO 密码需要返回吗？
                            {
                                title: '培训项目', width: 200, templet: function (d) {
                                    return d.project.projectName;
                                }
                            },
                            {
                                title: '班级', width: 200, templet: function (d) {
                                    return d.classs.className;
                                }
                            },
                            {
                                title: '指导教师', width: 200, templet: function (d) {
                                    return d.expert ? d.expert.name : '';
                                }
                            },
                            {fixed: 'right', title: '操作', toolbar: '#barTable', width: 300}
                        ]],
                        page: true,
                        limit: 10,
                        limits: [10,50, 100, 150, 200],
                        id: 'tableList',
                        done: function (res, curr, count) {
                            // 打印后台返回的数据
                            console.log("返回的数据：", res.data);
                            $('.layui-table').css("width", "100%");
                            $("th[data-field='delete']").css("border-right", 'none');
                        }
                    });

                    // 初始化项目和班级数据
                    $(document).ready(function () {
                        Promise.all([
                            $.ajax({
                                url: '/project/listProjectName',
                                type: 'GET',
                                success: function (data) {
                                    projectNameList = data.data;
                                    // 填充项目下拉框
                                    var projectSelect = $('#projectSelect');
                                    projectSelect.empty(); // 清空现有内容
                                    projectSelect.append('<option value="">请选择项目</option>'); // 添加默认项
                                    projectNameList.forEach(function (item) {
                                        projectSelect.append('<option value="' + item + '">' + item + '</option>');
                                    });
                                    form.render('select'); // 渲染下拉框
                                    console.log(projectNameList)
                                }
                            }),
                            $.ajax({
                                url: '/class/listClassName',
                                type: 'GET',
                                success: function (data) {
                                    classesNameList = data.data;
                                    // 填充项目下拉框
                                    var classSelect = $('#classSelect');
                                    classSelect.empty(); // 清空现有内容
                                    classSelect.append('<option value="">请选择班级</option>'); // 添加默认项
                                    classesNameList.forEach(function (item) {
                                        classSelect.append('<option value="' + item + '">' + item + '</option>');
                                    });
                                    form.render('select'); // 渲染下拉框
                                    console.log(classesNameList)
                                }
                            }),
                            $.ajax({
                                url: '/expert/listExpertName',
                                type: 'GET',
                                success: function (data) {
                                    expertNameList = data.data;
                                    // 填充项目下拉框
                                    var expertSelect = $('#expertSelect');
                                    expertSelect.empty(); // 清空现有内容
                                    expertSelect.append('<option value="">请选择指导教师</option>'); // 添加默认项
                                    expertNameList.forEach(function (item) {
                                        expertSelect.append('<option value="' + item + '">' + item + '</option>');
                                    });
                                    form.render('select'); // 渲染下拉框
                                    console.log(expertNameList)
                                }
                            }),
                            $.ajax({
                                url: '/user/listChargerName',
                                type: 'GET',
                                success: function (data) {
                                    chargerNameList = data.data;
                                    console.log(chargerNameList);
                                }
                            })
                        ]).then(function () {
                        }).catch(function (error) {
                            console.error(error);
                        });
                    });


                    $('#search').click(function () {
                        setTimeout(function () {
                            table.reload('tableList', {
                                url: '/student/list',
                                method: 'post',
                                where: {
                                    name: $('#name').val(),
                                    department: $('#department').val(),
                                    tel: $('#tel').val(),
                                    project: $('#projectName').val(),
                                    classs: $('#className').val(),
                                    expert: $('#expertName').val()
                                },
                                page: {
                                    curr: 1 //从新从第一页开始
                                }
                            });
                        })

                    });
                    // 监听工具条
                    table.on('tool(tableList)', function (obj) {
                        var data = obj.data;
                        console.log(obj);
                        if (obj.event == 'del') {
                            var postData = {id: data.id};
                            layer.confirm('真的要删除该数据吗？', function (index) {
                                console.log(data.id);
                                $.ajax({
                                    type: 'POST',
                                    url: "/student/del",
                                    data: postData,
                                    dataType: 'json',
                                    beforeSend: function () {
                                    },
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code == 0) {
                                            table.reload('tableList', {
                                                done: function (res, curr, count) {
                                                    // 确保在删除和查询操作后执行以下代码
                                                    $('.layui-table').css("width", "100%");
                                                    $("th[data-field='delete']").css("border-right", 'none');
                                                    // 检查当前页是否还有数据
                                                    if (res.data.length === 0 && curr > 1) {
                                                        // 当前页没有数据且不是第一页，跳转到上一页
                                                        table.reload('tableList', {
                                                            page: {
                                                                curr: curr - 1
                                                            }
                                                        });
                                                    }
                                                }
                                            });
                                            layer.msg(res.msg);
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 2,
                                                anim: 6
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            })
                        } else if (obj.event == 'edit') {
                            window.ClassNames = classesNameList;
                            window.ProjectNames = projectNameList;
                            layer.open({
                                type: 2,
                                title: '编辑学员',
                                fixed: false,
                                maxmin: true,
                                area: ['800px', '400px'],
                                content: '/student/form?id=' + data.id,

                            });
                        } else if (obj.event == "reset_password") {
                            var postData = {id: data.id};
                            layer.confirm('真的要重置密码吗？', function (index) {
                                console.log(data.id);
                                $.ajax({
                                    type: 'POST',
                                    url: "/student/resetPassword",
                                    data: postData,
                                    dataType: 'json',
                                    beforeSend: function () {
                                    },
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code === 0) {
                                            table.reload('tableList', {
                                                done: function (res, curr, count) {
                                                    // 确保在删除和查询操作后执行以下代码
                                                    $('.layui-table').css("width", "100%");
                                                    $("th[data-field='delete']").css("border-right", 'none');
                                                    // 检查当前页是否还有数据
                                                    if (res.data.length === 0 && curr > 1) {
                                                        // 当前页没有数据且不是第一页，跳转到上一页
                                                        table.reload('tableList', {
                                                            page: {
                                                                curr: curr - 1
                                                            }
                                                        });
                                                    }
                                                }
                                            });
                                            layer.msg(res.msg);
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 2,
                                                anim: 6
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            })
                        } else if (obj.event === "assign_expert") {
                            var postData = {id: data.id};
                            layer.open({
                                type: 2,
                                title: '分配指导教师',
                                fixed: false,
                                maxmin: true,
                                area: ['800px', '400px'],
                                content: '/student/assignExpertForm?studentIds=' + data.id,
                            });
                        }
                    });



                    $('#addStudent').click(function () {
                        window.ClassNames = classesNameList;
                        window.ProjectNames = projectNameList;
                        //window.ExepertNames = expertNameList;
                        layer.open({
                            type: 2,
                            title: '新增',
                            fixed: false,
                            maxmin: true,
                            area: ['800px', '380px'],
                            content: '/student/form?id=0'
                        })
                    });
                    $('#batchImportStudent').click(function (){
                        window.ProjectNames = projectNameList;
                        window.chargerNames = chargerNameList;
                        layer.open({
                            type: 2,
                            title: '批量导入',
                            fixed: false,
                            maxmin: true,
                            area: ['700px', '400px'],
                            content: '/student/batchImportForm',
                        })
                    });


                    //分配专家

                    // 监听分配专家按钮
                    $('#assignExpert').click(function () {
                        var checkStatus = table.checkStatus('tableList'); // 获取选中的行
                        var selectedStudents = checkStatus.data;  // 获取选中的学生数据

                        if (selectedStudents.length === 0) {
                            layer.msg('请先选择学员！');
                            return;
                        }

                        // 获取选中的学生ID数组
                        var studentIds = getSelectedStudentIds(selectedStudents);

                        // 打开专家分配页面
                        openAssignExpertForm(studentIds);
                    });




                    // 获取选中的学生ID数组
                    function getSelectedStudentIds(selectedStudents) {
                        return selectedStudents.map(function (student) {
                            return student.id;
                        });
                    }

                    // 打开专家分配页面
                    function openAssignExpertForm(studentIds) {
                        layer.open({
                            type: 2,
                            title: '指导教师分配',
                            fixed: false,
                            maxmin: true,
                            area: ['800px', '400px'],
                            content: 'assignExpertForm?studentIds=' + studentIds.join(','),
                            success: function(layero, index){
                                console.log('专家分配页面已打开');
                            },
                            error: function(){
                                layer.msg('打开专家分配页面失败，请稍后再试！');
                            }
                        });
                    }

                })

            </script>


        </div>
    </div>
</div>
</body>
</html>
